<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="mini"
      :inline="true"
      v-show="showSearch"
    >
      <el-form-item label="" prop="stage">
        <el-button
          :type="item.value == queryParams.state ? 'primary' : 'default'"
          size="mini"
          @click="searchState(item.value)"
          v-for="item in stateOptions"
          :key="item.value"
          >{{ item.label }}</el-button
        >
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="projectList">
      <el-table-column label="纬度" prop="lat" width="120" />
      <el-table-column label="经度" prop="lng" width="120" />
      <!-- <el-table-column label="附件" prop="photoFile" width="120" /> -->
      <el-table-column label="备注" prop="remark" width="120" />
      <el-table-column label="拜访内容" prop="content" width="120" />

      <!-- <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="approve(scope.row.id)">
            审批
          </el-button>
        </template>
      </el-table-column> -->
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <ApproveDialog ref="approveDialog" />
  </div>
</template>

<script>
import { getVisitRecordList } from "@/api/visit/visit";
import ApproveDialog from "./ApproveDialog.vue";

export default {
  data() {
    return {
      // 遮罩层
      loading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        state: 1,
      },
      // 数据列表
      projectList: [{}],
      stateOptions: [
        {
          label: "待审批",
          value: 1,
        },
        {
          label: "已通过",
          value: 2,
        },
        {
          label: "驳回",
          value: 3,
        },
      ],
    };
  },
  computed: {
    id() {
      return this.$route.query.id;
    },
  },
  components: { ApproveDialog },
  created() {
    this.getList();
  },
  filters: {},
  methods: {
    getList() {
      this.loading = true;

      getVisitRecordList({ ...this.queryParams, visitPlanId: this.id }).then(
        (response) => {
          this.projectList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },

    searchState(value) {
      this.queryParams.state = value;
      this.handleQuery();
    },

    /** 修改按钮操作 */
    handleUpdate() {},
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    approve(id) {
      this.$refs.approveDialog.showDialog(id)
    },
  },
};
</script>
